<template>
  <div>
     <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
         <el-input style="width:40%;" placeholder="请输入内容"  class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
         </el-input>
         <!-- 列表数据 -->
         <el-table :data='orderList' border>
             <el-table-column type='index'></el-table-column>
             <el-table-column label='订单编号' prop='order_number'></el-table-column>
             <el-table-column label='订单价格' prop='order_price'></el-table-column>
             <el-table-column label='是否付款'>
                 <template slot-scope="scope">
                     <!-- {{scope.row.pay_status}} -->
                     <el-tag v-if="scope.row.pay_status=='1'" type='success'>已付款</el-tag>
                     <el-tag v-else type='warning'>未付款</el-tag>
                 </template>
             </el-table-column>
             <el-table-column label='是否发货' prop='is_send'></el-table-column>
             <el-table-column label='发货时间'>
                 <template slot-scope="scope">
                     {{scope.row.create_time | formData}}
                 </template>
             </el-table-column>
             <el-table-column label='操作'>
                 <el-button @click="editDialogVisible=true" type="primary" icon="el-icon-edit" circle></el-button>
                 <el-button @click="showProgressDialog" type="success" icon="el-icon-location" circle></el-button>
             </el-table-column>
         </el-table>
          <!--  -->
        <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.pagenum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryData.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </el-card>

    <!--修改按钮对话框  -->
    <el-dialog
    title="修改地址"
    :visible.sync="editDialogVisible"
    width="50%">
     <div class="block">
        <span class="demonstration">省市区/县</span>
        <el-cascader
            v-model="cascaderArr"
            :options="cityDate"
            :props="props"
            @change="handleChange"
           >
        </el-cascader>
    </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button  type="primary" @click="editDialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 查看进度对话框 -->
     <el-dialog
    title="物流进度"
    :visible.sync="progressDialogVisible"
    width="50%">
    <el-timeline :reverse="true">
        <el-timeline-item
        v-for="(activity, index) in progressList"
        :key="index"
        :timestamp="activity.time">
        {{activity.context}}
        </el-timeline-item>
    </el-timeline>
    </el-dialog>
  </div>
</template>

<script>
import cityDate from './citydata'
export default {

  data () {
    return {
        queryData:{
            query:'',
            pagenum:1,
            pagesize:10
        },
        total:0,
        orderList:[],
        editDialogVisible:false,
        cascaderArr:[],
        props:{
            expandTrigger: 'hover',
            label:'label',
            value:'value'
        },
        cityDate,
        progressDialogVisible:false,
        progressList:[]
    }
  },

  methods: {
      async getOrders(){
          const res=await this.axios.get('/orders',{
              params:this.queryData
          })
          if(res.meta.status==200){
            //   console.log(res);
              this.orderList=res.data.goods;
              this.total=res.data.total;
          }
        //   console.log(this.orderList);
        //   console.log(this.total);          
      },
    //   处理当前页显示最大数量
    handleSizeChange(val){
        this.queryData.pagesize=val;
        this.getOrders();
    },
    // 页码发生变化
    handleCurrentChange(val){
        this.queryData.pagenum=val;
        this.getOrders();
    },
    handleChange(){
      console.log(this.cascaderArr);
    },
    async showProgressDialog(){
        this.progressDialogVisible=true;

        const res=await this.axios.get('/kuaidi/'+1106975712662);
        if(res.meta.status==200){
            this.progressList=res.data;
        }
        console.log(this.progressList);
    }
  },

  created () {
      this.getOrders();
  }
  
}
</script>

<style lang='less' scoped>

</style>
